<template>
    <div class="header">
        <div class="header_bottom1">
            <div class="logo">
                <a href="#/">
                    <img src="/static/images/logo1.png" alt="">
                </a>
            </div>
            <div class="user_info" v-if="user">
                <img src="/static/images/avatar.png" alt="" v-if="!user.headpic">
                <img :src="user.headpic" alt="" v-else>
                <span class="name">{{user.realname}}</span>
                <div class="quit_btn" @click="quit">
                    退出登录
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'commonheader2',
    props:{
        user:{
          type:Object,
          default:null
        }
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods:{
      quit(){
        localStorage.removeItem('token')
        localStorage.removeItem('userInfo')
        alert('退出成功！')
        this.$router.push({
          path:'/'
        })
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
    @import '@/assets/css/common.scss'
  </style>
  